// table表格相关
.table {
    width: 100%;
    max-width: 100%;
    margin-bottom: $spacer;
    background-color: $table-bg;
    th,
    td {
        padding: $table-cell-padding;
        vertical-align: middle;
        border-top: $table-border-width solid $table-border-color;
    }
    thead th {
        vertical-align: bottom;
        border-bottom: (2 * $table-border-width) solid $table-border-color;
    }
    tbody+tbody {
        border-top: (2 * $table-border-width) solid $table-border-color;
    }
    .table {
        background-color: $body-bg;
    }
}

// Bordered version
//
// Add borders all around the table and between all the columns.
.table-bordered {
    border: $table-border-width solid $table-border-color;
    th,
    td {
        border: $table-border-width solid $table-border-color;
    }
    thead {
        th,
        td {
            border-bottom-width: (2 * $table-border-width);
        }
    }
}

@include table-row-variant(active, $table-active-bg);
// Zebra-striping
//
// Default zebra-stripe styles (alternating gray and transparent backgrounds)
.table-striped {
    tbody tr:nth-of-type(odd) {
        background-color: $table-accent-bg;
    }
}

.table-hover {
    tbody tr {
        @include hover {
            background-color: $table-hover-bg;
        }
    }
}

// Dark styles
//
// Same table markup, but inverted color scheme: dark background and light text.
// stylelint-disable-next-line no-duplicate-selectors
.table {
    .thead-dark {
        th {
            color: $table-dark-color;
            background-color: $table-dark-bg;
            border-color: $table-dark-border-color;
        }
    }
    .thead-light {
        th {
            color: $table-head-color;
            background-color: $table-head-bg;
            border-color: $table-border-color;
        }
    }
}

.table-dark {
    color: $table-dark-color;
    background-color: $table-dark-bg;
    th,
    td,
    thead th {
        border-color: $table-dark-border-color;
    }
    &.table-bordered {
        border: 0;
    }
    &.table-striped {
        tbody tr:nth-of-type(odd) {
            background-color: $table-dark-accent-bg;
        }
    }
    &.table-hover {
        tbody tr {
            @include hover {
                background-color: $table-dark-hover-bg;
            }
        }
    }
}

.table-hw {
    color: $hw-color;
    background-color: $body-bg;
    .thead-hw {
        background-color: $hw-table-bg;
    }
    th,
    td,
    thead th {
        padding: $hw-table-padding;
        height: $hw-table-height;
        border-color: $table-dark-border-color;
    }
    &.table-bordered {
        border: 0;
    }
    &.table-striped {
        tbody tr:nth-of-type(odd) {
            background-color: $table-hw-accent-bg;
        }
    }
    &.table-hover {
        tbody tr {
            @include hover {
                background-color: $table-dark-hover-bg;
            }
        }
    }
}

.table-bordered-hw {
    border: $table-border-width solid $table-dark-border-color;
    th,
    td {
        border: $table-border-width solid $table-dark-border-color;
    }
    thead {
        th,
        td {
            border-bottom-width: (2 * $table-border-width);
        }
    }
}